<template>
  <div class="hearder-container">
    <div class="header-left">
      <div class="header-title" @click="$router.push('/')">后台管理系统</div>

      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="item in tabs"
          :key="item.path"
          :to="{ path: item.path }"
          >{{ item.meta.info }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="header-right">
      <el-col>
        <el-dropdown trigger="click">
          <div class="header-logo">
            <img src="../assets/img/修猫.webp" alt="" />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="UserFilled" @click="goMyPage"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item :icon="Sort" @click="loginOut"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Grid, Setting, Sort, UserFilled } from "@element-plus/icons-vue";
import { useRoute, RouteLocationMatched, useRouter } from "vue-router";
import { ref, Ref, watch } from "vue";
const route = useRoute();
const router = useRouter();

//    定义导航数据
const tabs: Ref<RouteLocationMatched[]> = ref([]);

/**
 * 获取路由信息设置面包屑
 */
const getBreadCom = () => {
  let mached = route.matched.filter((item) => item.meta.info);
  // 第一个路径如果不是首页，需要在匹配路径前面拼接一个首页
  const first = mached[0];

  if (first.path !== "/home") {
    mached = [{ path: "/home", meta: { info: "首页" } } as any].concat(mached);
  }
  //设置面包屑的数据
  tabs.value = mached;
};
getBreadCom();
// 监听路径的改变,如果发生变化了，执行方法
watch(
  () => route.path,
  () => getBreadCom()
);

//退出登录
const loginOut = () => {
  localStorage.removeItem("userInfo");
  router.go(0);
};

//到个人中心
const goMyPage = () => {
  router.push({ name: "My" });
};
</script>

<style lang="less" scoped>
.hearder-container {
  line-height: 60px;
  padding-right: 5vw;
  display: flex;
  align-items: centers;
  justify-content: space-between;

  .header-left {
    margin: 0 20px;
    display: flex;
    align-items: center;
    .header-title {
      font-size: 1.5em;
      font-weight: bold;
      margin-right: 10px;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        color: #333;
      }
    }
    .el-breadcrumb {
      padding-left: 20px;
      font-size: 18px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    justify-content: center;
    .el-col {
      display: flex;
    }
    .header-logo {
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
  }
}
</style>
